<template>
  <div class="register-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>

    <!-- 注册卡片 -->
    <div class="register-card">
      <!-- 品牌标识区域 -->
      <div class="brand-section">
        <div class="brand-logo">
          <img src="/RyderTest.png" alt="RyderTest Logo" class="logo-icon" />
        </div>
        <h1 class="brand-title">注册新账户</h1>
        <p class="brand-subtitle">欢迎加入AI智能自动化平台</p>
      </div>

      <!-- 注册表单 -->
      <form @submit.prevent="handleSubmit" class="register-form">
        <!-- 用户名输入框 -->
        <div class="input-group">
          <div class="input-wrapper">
            <div class="input-icon">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
              </svg>
            </div>
            <input
              type="text"
              id="username"
              v-model="formState.username"
              required
              class="form-input"
              placeholder="请输入用户名"
            />
          </div>
        </div>

        <!-- 邮箱输入框 -->
        <div class="input-group">
          <div class="input-wrapper">
            <div class="input-icon">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
              </svg>
            </div>
            <input
              type="email"
              id="email"
              v-model="formState.email"
              required
              class="form-input"
              placeholder="请输入邮箱地址"
            />
          </div>
        </div>

        <!-- 密码输入框 -->
        <div class="input-group">
          <div class="input-wrapper">
            <div class="input-icon">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
              </svg>
            </div>
            <input
              :type="showPassword ? 'text' : 'password'"
              id="password"
              v-model="formState.password"
              required
              class="form-input"
              placeholder="请输入密码"
            />
            <div class="password-toggle" @click="togglePasswordVisibility">
              <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
              </svg>
            </div>
          </div>
        </div>

        <!-- 确认密码输入框 -->
        <div class="input-group">
          <div class="input-wrapper">
            <div class="input-icon">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
              </svg>
            </div>
            <input
              :type="showConfirmPassword ? 'text' : 'password'"
              id="confirmPassword"
              v-model="formState.confirmPassword"
              required
              class="form-input"
              placeholder="请再次输入密码"
            />
            <div class="password-toggle" @click="toggleConfirmPasswordVisibility">
              <svg v-if="!showConfirmPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
              </svg>
            </div>
          </div>
        </div>

        <!-- 注册按钮 -->
        <button
          type="submit"
          class="register-button"
          :class="{'loading': isLoading}"
          :disabled="isLoading"
        >
          <span v-if="!isLoading">注册</span>
          <span v-else class="loading-content">
            <svg class="loading-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            注册中...
          </span>
        </button>

        <!-- 错误消息 -->
        <div v-if="registerError" class="error-message">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="error-icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
          </svg>
          {{ registerError }}
        </div>

        <!-- 登录链接 -->
        <div class="login-link">
          <p>
            已经有账户了?
            <router-link to="/login" class="link">点此登录</router-link>
          </p>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/store/authStore';
import { Message } from '@arco-design/web-vue';

const router = useRouter();
const authStore = useAuthStore();

const formState = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
});

const showPassword = ref(false);
const showConfirmPassword = ref(false);

const isLoading = computed(() => authStore.getIsLoading);
const registerError = computed(() => authStore.getRegisterError);

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value;
};

// 验证密码确认
const validatePasswordConfirm = () => {
  return formState.password === formState.confirmPassword;
};

// 处理注册逻辑
const handleSubmit = async () => {
  if (!formState.username || !formState.email || !formState.password || !formState.confirmPassword) {
    Message.warning('请填写所有必填字段');
    return;
  }

  if (!validatePasswordConfirm()) {
    Message.warning('两次输入的密码不一致');
    return;
  }

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(formState.email)) {
    Message.warning('请输入有效的邮箱地址');
    return;
  }

  try {
    const success = await authStore.register(formState.username, formState.email, formState.password);
    if (success) {
      Message.success('注册成功！请登录。');
      router.push('/login');
    }
  } catch (e) {
    console.error('Exception during authStore.register call:', e);
    Message.error('注册过程中发生意外错误。');
  }
};
</script>

<style scoped>
/* 主容器 */
.register-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fc 0%, #e9ecf3 100%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 160, 233, 0.1) 0%, rgba(0, 160, 233, 0.05) 100%);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 150px;
  height: 150px;
  top: 70%;
  right: 15%;
  animation-delay: 2s;
}

.circle-3 {
  width: 100px;
  height: 100px;
  top: 50%;
  left: 80%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px) scale(1.05);
    opacity: 1;
  }
}

/* 注册卡片 */
.register-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.08),
    0 15px 25px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 40px 45px;
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.register-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.12),
    0 20px 35px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* 品牌标识区域 */
.brand-section {
  text-align: center;
  margin-bottom: 32px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-logo:hover {
  transform: translateY(-3px) scale(1.05);
}

.logo-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
}

.brand-title {
  font-size: 28px;
  font-weight: 700;
  color: #333333;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}

.brand-subtitle {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
  font-weight: 500;
}

/* 注册表单 */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 输入组 */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 18px;
  z-index: 1;
  color: #9ca3af;
  transition: color 0.3s ease;
}

.input-icon svg {
  width: 20px;
  height: 20px;
}

.form-input {
  width: 100%;
  padding: 16px 20px 16px 54px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  font-size: 16px;
  color: #374151;
  background: #fafafa;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  min-height: 52px;
}

.form-input:focus {
  outline: none;
  border-color: #00a0e9;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 160, 233, 0.08);
  transform: translateY(-1px);
}

.form-input:focus + .input-icon,
.input-wrapper:focus-within .input-icon {
  color: #00a0e9;
}

.password-toggle {
  position: absolute;
  right: 18px;
  cursor: pointer;
  color: #9ca3af;
  transition: color 0.3s ease;
  z-index: 1;
}

.password-toggle:hover {
  color: #00a0e9;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* 注册按钮 */
.register-button {
  width: 100%;
  padding: 12px 24px;
  background: #00a0e9;
  border: none;
  border-radius: 14px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 16px rgba(0, 160, 233, 0.25);
  position: relative;
  overflow: hidden;
  min-height: 48px;
  letter-spacing: 0.2px;
}

.register-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(26, 170, 235, 0.35);
  background: #1aaaeb;
}

.register-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  transition: all 0.1s ease;
  background: #0090d1;
}

.register-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 错误消息 */
.error-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 15px;
  margin-top: 8px;
}

.error-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 20px;
}

.login-link p {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

.login-link .link {
  color: #00a0e9;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.login-link .link:hover {
  color: #0090d1;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-container {
    padding: 16px;
    height: 100vh;
    overflow-y: auto;
  }

  .register-card {
    margin: 0;
    padding: 24px 20px;
    max-width: none;
    min-height: auto;
  }

  .brand-section {
    margin-bottom: 20px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .logo-icon {
    width: 26px;
    height: 26px;
  }

  .brand-title {
    font-size: 22px;
  }

  .brand-subtitle {
    font-size: 13px;
  }

  .register-form {
    gap: 16px;
  }

  .form-input {
    padding: 12px 14px 12px 42px;
    font-size: 16px;
    min-height: 44px;
  }

  .input-icon {
    left: 14px;
  }

  .password-toggle {
    right: 14px;
  }

  .register-button {
    padding: 12px 18px;
    min-height: 44px;
  }

  .login-link {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .register-container {
    padding: 12px;
    height: 100vh;
    overflow-y: auto;
  }

  .register-card {
    margin: 0;
    padding: 20px 16px;
  }

  .brand-section {
    margin-bottom: 16px;
  }

  .brand-title {
    font-size: 20px;
  }

  .register-form {
    gap: 14px;
  }

  .login-link {
    margin-top: 12px;
  }
}

/* 高度不足时的处理 */
@media (max-height: 700px) {
  .register-container {
    height: 100vh;
    overflow-y: auto;
    align-items: flex-start;
    padding-top: 20px;
  }

  .register-card {
    margin: 0 auto;
  }

  .brand-section {
    margin-bottom: 16px;
  }

  .register-form {
    gap: 16px;
  }
}

/* 动画效果 */
.register-card {
  animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 输入框聚焦动画 */
.form-input:focus {
  animation: inputFocus 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 160, 233, 0.3);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(0, 160, 233, 0.15);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(0, 160, 233, 0.08);
    transform: translateY(-1px);
  }
}

/* 品牌logo旋转效果 */
@keyframes logoRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.brand-logo:active {
  animation: logoRotate 0.6s ease-in-out;
}

/* 微妙的脉冲效果 */
.register-button:not(:disabled) {
  position: relative;
  overflow: hidden;
}

.register-button:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.register-button:hover:not(:disabled)::before {
  left: 100%;
}
</style>